<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>守望先锋-官方网站</title>
  <link rel="stylesheet" href=".../source/source/reset.css">
</head>
<style>
  .clearfix::after{
    content: "";
    display: block;
    clear: both;
  }
  .nav{
    height: 48px;
    font-size: 16px;
    font-weight: 400;
    color: #4b535d;
    background-color: rgb(242, 241, 237);
  }
   .nav .nav-log {
    float: left;
  }
   .nav .nav-log .log{
    height: 48px;
    width: 58px;
    background-image: url('../source/imgs/logo.jpg');
    background-size: 53px 96px;
    background-position: 0 0;
    border: 1px solid #4b535d;;
  }
   .nav .nav-menu>li{
    padding: 0 10px;
    line-height: 48px;
    float: left;
    border-right: 1px solid #e5e3dc;
    position: relative;
  }
  .nav .nav-menu>li:hover{
    background-color: #353c42;
    color: #ff9c00;
  }
   .nav .nav-menu>li a{
    padding: 0 8px;
    height: 100%;
  }
  
  .nav .nav-menu>li:hover .submenu{
    display: block;
  }
  .nav .nav-menu .submenu{
    font-size: 14px;
    display: none;
    color: #fff;
    position: absolute;
    left: 0px;
    width: 160px;
    background-color: #353c42;
  }

  .nav .nav-menu .submenu>li{
    border-bottom:1px solid rgb(75, 83, 93) ;
  }
  .nav .nav-menu .submenu>li:hover::before{
    content: "|";
    color: #a58616;
    margin: 0 3px 0 0;
    top: -1px;
}
.nav .nav-right{
  line-height: 48px;
  float: right;
  padding: 0 40px;
  font-weight: 700;
  background-color: #f7931e;
}
.bar{
  position: relative;
  margin-top: 20px;
  height: 280px;
  background: url('../source/imgs/hengfu.jpg');
  z-index: -2;
}
.bar .bar-content{
  color: #333333;
  text-align: center;
  width: 600px;
  margin: 0 auto;
}
.bar .bar-content h3{
   font-size: 3.90625rem;
    font-style: italic;
    font-weight: 400;
    font-variant: normal;
    line-height: normal;
    letter-spacing: .8px;
}
.bar .bar-content p{
  margin: 12px 0 20px 0;
  font-size: 24px;
}
.bar .bar-content .button{
  margin: 0 auto;
  height: 40px;
  width: 150px;
  background-color: #ff9c00;
  font-size: 20px;
  color: #fff;
  line-height: 40px;
  border-radius: 6px;
}
.bar .bar-content .button:hover{
  border-color: #ffb033;
  background-color: #ffb033;
}
.bar .bar-img{
  width: 680px;
  height: 370px;
  background: url('../source/imgs/hero1.png');
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: -1;
}
</style>
<body>
<div class="main">
  <nav class="nav">
    <div class="nav-log">
      <a href="#">
        <div class="log"></div>
      </a>
    </div>
    <ul class="nav-menu">
      <li>
        <a href="">游戏<span>↓</span></a>
        <ul class="submenu clearfix">
          <li><a href="">概述</a></li>
          <li><a href="">地图</a></li>
          <li><a href="">赞赏系统</a></li>
        </ul>
      </li>
      <li>
        <a href="">英雄</a>
      </li>
      <li>
        <a href="">活动</a>
        <ul class="submenu clearfix">
          <li><a href="">夏季运动会</a></li>
          <li><a href="">心动档案</a></li>
          <li><a href="">欢度新春</a></li>
          <li><a href="">雪国仙境</a></li>
        </ul>
      </li>
      <li>
        <a href="">视频图片</a>
      </li>
      <li>
        <a href="">新闻</a>
        <ul class="submenu clearfix">
          <li><a href="">新闻</a></li>
          <li><a href="">补丁</a></li>
        </ul>
      </li>
      <li>
        <a href="">下载</a>
      </li>
      <li>
        <a href="">电子竞技</a>
        <ul class="submenu clearfix">
          <li><a href="">概述</a></li>
          <li><a href="">守望先锋公开争霸赛</a></li>
          <li><a href="">守望先锋挑战者选拔赛</a></li>
        </ul>
      </li>
    </ul>
    <div class="nav-right">
      <a href="#" class="buy">购买</a>
    </div>
  </nav>
  <div class="bar">
    <div class="bar-content">
      <h3>开始守望</h3>
      <p>加入终极团队射击游戏，为未来而战。</p>
      <a href="">
        <div class="button">立即购买</div>
      </a>
    </div>
    <div class="bar-img"></div>
  </div>
</div>
</body>
</html>